<script setup>
import { ref } from 'vue'
const loading = ref(true) // 初始化时设为true
import Form from '@/components/common/formAdd.vue'
import { useUserStore } from '@/stores/user'
import { addPracticeApplyApi, cancelPracticeApplyApi, getPracticeApplyListApi } from '@/api/baseData'
import { dayFormat } from '@/utils/common/dayjs'
import { showMessage, showStatusMessage } from '@/utils/common/showMessage'
import PracticeApplyStep from '@/components/practice/practiceApplyStep.vue'
import Table from '@/components/practice/table.vue'
import { ElMessageBox } from 'element-plus'
const userStore = useUserStore()
// 默认激活的stepActive
const stepActive = ref(-1) // 初始化为-1,表示未加载状态
// 定义表单数据
const formData = {
  account: userStore.userInfo.account,
  name: userStore.userInfo.name,
  college: userStore.userInfo.college,
  major: userStore.userInfo.major,
  class: userStore.userInfo.class,
  type: '',
  desc: ''
}
const formOpt = [
  {
    label: '账号',
    prop: 'account',
    type: 'input',
    disabled: true
  },
  {
    label: '姓名',
    prop: 'name',
    type: 'input',
    disabled: true
  },
  {
    label: '学院',
    prop: 'college',
    type: 'input',
    disabled: true
  },
  {
    label: '专业',
    prop: 'major',
    type: 'input',
    disabled: true
  },
  {
    label: '班级',
    prop: 'class',
    type: 'input',
    disabled: true
  },
  {
    label: '实习类型',
    prop: 'type',
    type: 'selectIntership'
  }
]
const btnOpt = [
  {
    type: 'warning',
    name: '重置',
    click: 'handleReset',
    prop: 'cancel'
  },
  {
    type: 'primary',
    name: '提交',
    click: 'handleSubmit',
    prop: 'submit'
  }
]
// 表单按钮点击监听事件
function handleForm(type, data) {
  switch (type) {
    case 'submit':
      handleFormSubmit(data)
      break
    default:
      break
  }
}
// 表单提交事件
async function handleFormSubmit(data) {
  console.log(data)
  const params = {
    ...data,
    status: 0,
    create_time: dayFormat(new Date())
  }
  loading.value = true
  try {
    const res = await addPracticeApplyApi(params)
    showStatusMessage(res)
    getPracticeApplyRecord()
    stepActive.value = 1
    loading.value = false
  } catch (error) {
    loading.value = false
  }
}
// 实习申请结果
const applyResult = ref(null)
const applyResultDesc = ref('')
const tableData = ref([])
const columns = ref([
  {
    label: '实习类型',
    prop: 'type'
  },
  {
    label: '申请时间',
    prop: 'create_time'
  }
])
const options = [
  {
    label: '查看申请流程',
    type: 'primary',
    prop: 'viewResultStep'
  },
  {
    label: '撤销申请',
    type: 'danger',
    prop: 'cancelApply'
  }
]
// 获取实习申请记录
async function getPracticeApplyRecord() {
  loading.value = true
  try {
    const res = await getPracticeApplyListApi({ account: userStore.userInfo.account })
    tableData.value = res.data

    if (res.data && res.data.length > 0) {
      console.log(res.data[0].status)
      if (res.data[0].status == 0) {
        stepActive.value = 1
      } else if (res.data[0].status === 1 || res.data[0].status === 2) {
        stepActive.value = 2
        applyResult.value = res.data[0].status
        applyResultDesc.value = res.data[0].desc
      }
    } else {
      stepActive.value = 0
    }
    loading.value = false
  } catch (error) {
    stepActive.value = 0
    loading.value = false
  }
}
getPracticeApplyRecord()

async function handleCancelApply(data) {
  console.log(data);
  // 弹出确认框 
  const confirm = await ElMessageBox.confirm('确定撤销申请吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
  if (confirm) {
    const res = await cancelPracticeApplyApi({ id: data.id })
    showStatusMessage(res)
    getPracticeApplyRecord()
  }
}
function handleTable(data, type) { // 修改参数顺序,因为Table组件传递的参数顺序是(data, type)
  switch (type) {
      case 'viewResultStep':
        handleviewResultStep(data)
        break
    case 'cancelApply':
      handleCancelApply(data)
      break
    default:
      break
  }
}
const drawer = ref(false)
const stepActiveData = ref(null)
function handleviewResultStep(data) {
  stepActiveData.value = data
  console.log(stepActiveData.value)
  drawer.value = true
}
function handleClose() {
  stepActiveData.value = null
  drawer.value = false
}
</script>

<template>
  <div class="apply-wrapper" v-loading="loading">
    <div class="apply-top">
      <Form :data="formData" :formOpt="formOpt" :btnOpt="btnOpt" @handleForm="handleForm"></Form>
    </div>
    <div class="apply-middle">
      <Table
        :tableData="tableData"
        :columns="columns"
        :tableOpt="tableOpt"
        :options="options"
        @handleTable="handleTable"
        border
        stripe
      ></Table>
    </div>
    <div class="apply-bottom">
    </div>
    <el-drawer
        v-model="drawer"
        title="I am the title"
        direction="rtl"
        size="40%"
        :before-close="handleClose"
      >
      <PracticeApplyStep :data="stepActiveData"></PracticeApplyStep>
      </el-drawer>
  </div>
</template>

<style lang="scss" scoped>
.apply-wrapper {
  display: flex;
  flex-direction: column;
}
.apply-top {
  width: 100%;
  height: 100px;
  text-align: left;
}
.apply-middle {
  width: 100%;
  margin-top: 80px;
}
.apply-bottom {
  width: 100%;
  flex: 1;
}
</style>
